<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Speech Synthesis</title>
		<link
			href="https://fonts.googleapis.com/css?family=Pacifico"
			rel="stylesheet"
			type="text/css" />
		<link
			rel="stylesheet"
			href="style.css" />
		<link
			rel="icon"
			href="https://fav.farm/🔥" />
	</head>
	<body>
		<div class="voiceinator">
			<h1>The Voiceinator 5000</h1>

			<select
				name="voice"
				id="voices">
				<option value="">Select A Voice</option>
			</select>

			<label for="rate">Rate:</label>
			<input
				name="rate"
				type="range"
				min="0"
				max="3"
				value="1"
				step="0.1" />

			<label for="pitch">Pitch:</label>

			<input
				name="pitch"
				type="range"
				min="0"
				max="2"
				step="0.1" />
			<textarea name="text">Hello! I love JavaScript 👍</textarea>
			<button id="stop">Stop!</button>
			<button id="speak">Speak</button>
		</div>

		<script>
			const msg = new SpeechSynthesisUtterance();
			let voices = [];
			const voicesDropdown = document.querySelector('[name="voice"]');
			const options = document.querySelectorAll('[type="range"], [name="text"]');
			const speakButton = document.querySelector('#speak');
			const stopButton = document.querySelector('#stop');

			let setVoice = (restart = true) => {
				msg.voice = voices.find((voice) => voice.name === voicesDropdown.value);
				window.speechSynthesis.cancel();

				if (restart) {
					window.speechSynthesis.speak(msg);
				}
			};
			function populateVoices() {
				voices = this.getVoices();
				voicesDropdown.innerHTML = voices
					.filter((voice) => voice.lang.includes('en'))
					.map((voice) => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
					.join('');
			}

			speakButton.addEventListener('click', setVoice);
			stopButton.addEventListener('click', () => window.speechSynthesis.cancel());
			options.forEach((option) => {
				option.addEventListener('change', (e) => {
					msg[option.name] = option.value;
					setVoice();
				});
			});
			voicesDropdown.addEventListener('change', setVoice);

			speechSynthesis.addEventListener('voiceschanged', populateVoices);
		</script>
	</body>
</html>
